<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template
                    v-for="(item, index) in $getBreadCrumbsName(
                        '/data-retrieval/index'
                    )"
                >
                    <ask-breadcrumb-item
                        :key="index"
                        v-if="item.path"
                        :to="'/' + item.path"
                        >{{ item.meta.title }}</ask-breadcrumb-item
                    >
                    <ask-breadcrumb-item :key="index" v-else>{{
                        item.meta.title
                    }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item>详情</ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <page-search-column class="fixed-column">
            <page-search-item>
                <p class="title">{{ $route.query.title }}</p>
            </page-search-item>
            <page-search-item class="right">
                <el-button type="primary" @click="goBlack()">返回</el-button>
            </page-search-item>
        </page-search-column>
        <div class="container">
            <div class="container-left" v-if="detailsList.length > 3">
                <el-checkbox-group v-model="showList" @change="handleChange">
                    <el-checkbox
                        v-for="item in detailsList"
                        :label="item"
                        :key="item.typeId"
                    >
                        {{ item.fieldName }}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
            <div
                class="container-right"
                v-if="dataList.length > 0"
                :style="detailsList.length < 4 ? 'width:100%' : ''"
            >
                <el-collapse
                    v-model="newactiveNames"
                    v-for="(item, index) in dataList"
                    :key="index"
                >
                    <el-collapse-item
                        :title="item.fieldName"
                        :name="item.field"
                    >
                        <ul>
                            <li
                                v-for="(subItem, index) in item.dataList"
                                :key="index"
                            >
                                <span>{{ subItem.chines }}</span>
                                <div
                                    v-if="subItem.valueKindId === '5'"
                                    class="box"
                                >
                                    <template
                                        v-if="
                                            subItem.valueData &&
                                                subItem.valueData.length
                                        "
                                    >
                                        <img
                                            v-if="
                                                subItem.valueData[0].includes(
                                                    $staticUrl
                                                )
                                            "
                                            :src="subItem.valueData[0]"
                                            alt=""
                                            @click="
                                                previewImg(subItem.valueData)
                                            "
                                        />
                                        <img
                                            v-else
                                            :src="
                                                /^http/g.test(
                                                    subItem.valueData[0]
                                                )
                                                    ? subItem.valueData[0]
                                                    : $staticUrl +
                                                      '/' +
                                                      subItem.valueData[0]
                                            "
                                            alt=""
                                            @click="
                                                previewImg(subItem.valueData)
                                            "
                                        />
                                        <i
                                            >共{{
                                                subItem.valueData.length
                                            }}张,点击图片查看全部</i
                                        >
                                    </template>
                                </div>
                                <div
                                    v-else-if="subItem.valueKindId === '8'"
                                    class="box"
                                >
                                    <template
                                        v-if="
                                            subItem.valueData &&
                                                subItem.valueData.length
                                        "
                                    >
                                        <video
                                            controls="controls"
                                            :src="
                                                /^http/g.test(
                                                    subItem.valueData[0]
                                                )
                                                    ? subItem.valueData[0]
                                                    : $staticUrl +
                                                      '/' +
                                                      subItem.valueData[0]
                                            "
                                        ></video>
                                        <i>点击视频播放</i>
                                    </template>
                                </div>
                                <div
                                    v-else-if="subItem.valueKindId === '9'"
                                    class="box"
                                >
                                    <template
                                        v-if="
                                            subItem.valueData &&
                                                subItem.valueData.length
                                        "
                                    >
                                        <audio
                                            controls="controls"
                                            :src="
                                                /^http/g.test(
                                                    subItem.valueData[0]
                                                )
                                                    ? subItem.valueData[0]
                                                    : $staticUrl +
                                                      '/' +
                                                      subItem.valueData[0]
                                            "
                                        ></audio>
                                        <i>点击录音播放</i>
                                    </template>
                                </div>
                                <div v-else-if="subItem.valueKindId === '4'">
                                    <el-button
                                        v-if="
                                            mapData.cityAddress ||
                                                mapData.address
                                        "
                                        @click="selectAddress(mapData)"
                                    >
                                        {{ mapData.cityAddress
                                        }}{{ mapData.address }}
                                    </el-button>
                                    <el-button
                                        v-else-if="
                                            mapData.latitude &&
                                                mapData.longitude
                                        "
                                        @click="selectAddress(mapData)"
                                        >查看定位
                                    </el-button>
                                    <strong v-else>暂无定位信息</strong>
                                </div>
                                <strong v-else-if="subItem.valueKindId === '3'">
                                    {{
                                        subItem.valueData
                                            ? subItem.valueData.substring(0, 10)
                                            : ""
                                    }}
                                </strong>
                                <strong v-else
                                    >{{ subItem.valueData }}
                                    <el-tooltip
                                        class="item"
                                        effect="dark"
                                        :content="message(subItem)"
                                        placement="top"
                                        v-if="subItem.relation"
                                    >
                                        <i
                                            class="el-icon-share"
                                            style="
                                                color: #e55253;
                                                margin-left: 10px;
                                            "
                                        ></i>
                                    </el-tooltip>
                                </strong>
                            </li>
                        </ul>
                    </el-collapse-item>
                    <el-collapse-item
                        v-if="
                            relationInfoVoList.length > 0 &&
                                index === dataList.length - 1
                        "
                        name="relevance"
                        title="资源关联"
                    >
                        <ol>
                            <li
                                v-for="(it, index) in relationInfoVoList"
                                :key="index"
                                @click="handleJump(it)"
                            >
                                <el-button>{{ it.name }}</el-button>
                            </li>
                        </ol>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </div>
        <map-location
            ref="MapLocation"
            @updateAddress="updateAddress"
        ></map-location>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { dialogPreviewImg } from "@/components/public/preview-img/index";
import { dialogPreviewVideoAudio } from "@core/public/preview-video-audio/index";
import MapLocation from "@/components/map-location/index.vue";
@Component({
    name: "DataRetrievalDetailsNotAlive",
    components: { MapLocation }
})
export default class DataRetrievalDetailsNotAlive extends Vue {
    detailsList: any[] = [];
    showList: any[] = [];
    dataList: any[] = [];
    relationInfoVoList: any[] = [];
    activeNames: any[] = ["basic"];

    mapData = {
        address: "",
        cityAddress: "",
        longitude: "",
        latitude: ""
    };

    get newactiveNames() {
        return this.activeNames.concat(["relevance"]);
    }

    created() {
        this.getDetailsInfo();
    }

    activated() {
        this.getDetailsInfo();
    }

    goBlack() {
        this.$router.go(-1);
    }

    message(item: any) {
        const list = item.relation.map((su: any) => {
            return su.name;
        });
        return `该信息关联${list.join("、")}`;
    }

    // 获取详情
    async getDetailsInfo() {
        const res = await this.$server["retrieval/detailsInfo"]({
            data: {
                dataId: this.$route.query.id,
                field: this.$route.query.currentFiled,
                parentId: this.$route.query.currentId,
                typeId: this.$route.query.currentId
            }
        });
        if (res.data.code === 200) {
            this.detailsList = res.data.data;
            if (this.detailsList.length > 3) {
                this.dataList = this.detailsList.filter((item: any) => {
                    return (item = item.field === "basic");
                });
                this.showList = this.dataList;
            } else {
                this.dataList = this.detailsList;
                this.showList = this.detailsList;
                this.activeNames = this.detailsList.map((item: any) => {
                    return item.field;
                });
            }
            this.dataList.forEach((item: any) => {
                item.dataList.forEach((subItem: any) => {
                    if (subItem.valueKindId === "4") {
                        this.mapData = {
                            address: subItem.valueData.address,
                            cityAddress: subItem.valueData.cityAddress,
                            longitude: subItem.valueData.longitude,
                            latitude: subItem.valueData.latitude
                        };
                    }
                });
            });
            this.relationInfoVoList = this.detailsList.reduce(
                (prev: any, next: any) => {
                    return prev.concat(next.relationInfoVoList);
                },
                []
            );
        }
    }

    //
    handleChange(value: any) {
        this.dataList = value;
        this.activeNames = value.map((item: any) => {
            return item.field;
        });
    }

    // 选择地址
    selectAddress(data: any) {
        (this.$refs.MapLocation as any).show(
            {
                ...data,
                address: data.cityAddress || data.address,
                cityAddress: data.address || data.cityAddress
            },
            "readonly"
        );
    }

    // 选址后回调
    updateAddress(data: any) {
        this.mapData = {
            address: data.address,
            cityAddress: data.infoAddress,
            longitude: data.lng,
            latitude: data.lat
        };
    }

    // 图片预览
    previewImg(urls: any) {
        const list = urls.map((item: any) => {
            if (/^http/g.test(item)) {
                return item;
            }
            return this.$staticUrl + "/" + item;
        });
        dialogPreviewImg({ title: "预览图片", current: list });
    }

    // 视频预览
    previewVideo(url: any) {
        dialogPreviewVideoAudio({
            sourceUrl: /^http/g.test(url) ? url : this.$staticUrl + "/" + url
        });
    }

    handleJump(it: any) {
        this.$router.push({
            name: "DataRetrievalLinkData",
            query: {
                dataIds: it.dataIds.join(","),
                field: it.field,
                name: it.name,
                typeId: it.typeId,
                title: this.$route.query.title
            }
        });
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .base-page-wrapper {
        overflow-y: scroll !important;
        height: 100%;
    }
    .page-base-body {
        background: transparent !important;
        height: calc(100% - 50px) !important;
    }
    .el-collapse-item__header {
        font-size: 16px;
        color: #37383a;
    }
}
* {
    margin: 0;
    box-sizing: border-box;
}

.container {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    height: calc(100% - 58px) !important;
    &-left {
        // flex: 1;
        width: 150px;
        padding: 12px 18px;
        background: #fff;
        margin-right: 10px;
        ::v-deep .el-checkbox-group {
            display: flex;
            flex-direction: column;
            label {
                display: flex;
                align-items: center;
                .el-checkbox__input {
                    width: 18%;
                }
                .el-checkbox__label {
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                & + label {
                    margin-top: 20px;
                }
            }
        }
    }
    &-right {
        width: calc(100% - 160px);
        background-color: #fff;
        padding: 30px;
        height: 100%;
        overflow-y: auto;
        ul {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 100%;
            li {
                width: 45%;
                display: flex;
                margin-bottom: 12px;
                .box {
                    display: flex;
                    flex-direction: column;
                    img {
                        margin-top: 6px;
                    }
                    i {
                        font-style: normal;
                        font-size: 12px;
                        color: #9da1a4;
                        margin-top: 4px;
                    }
                }
                span {
                    font-size: 14px;
                    margin-right: 32px;
                    color: #9da1a4;
                }
                strong {
                    font-style: normal;
                    color: #37383a;
                    font-weight: 400;
                    flex: 1;
                }
                img {
                    width: 162px;
                    height: 95px;
                    cursor: pointer;
                }
                video {
                    width: 162px;
                    height: 95px;
                    cursor: pointer;
                }
                audio {
                    width: 200px;
                    height: 40px;
                }
            }
        }
        ::v-deep .el-collapse {
            border-top: none;
        }
        ol {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            padding: 0;
            li {
                margin-right: 20px;
                margin-bottom: 10px;
            }
        }
    }
}
.fixed-column {
    .title {
        line-height: 36px;
    }
}
</style>
